<template>
 <div>
    <van-nav-bar
      title="主食"
      left-text="返回"
      left-arrow
      @click="onClickLeft"
    />

    <div>
      <van-search v-model="value" placeholder="请输入搜索关键词" />
    </div>

    <div class="zz1">
        <dl>
            <dt>
                <img src="../../assets/z1.png" />
            </dt>
            <dd>
                <p>蚕豆 胡豆 夏豆 罗汉豆 川豆 倭豆</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
      <div class="zz2">
        <dl>
            <dt>
                <img src="../../assets/z2.png" />
            </dt>
            <dd>
                <p>大麦 元麦，饭麦，赤膊麦，裸大麦</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
     <div class="zz3">
        <dl>
            <dt>
                <img src="../../assets/z3.png" />
            </dt>
            <dd>
                <p>奥皮 麦穗，麦糠</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
     <div class="zz4">
        <dl>
            <dt>
                <img src="../../assets/z4.png" />
            </dt>
            <dd>
                <p>高粱 蜀黍，木秫，荻梁，乌禾，芦擦</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
     <div class="zz5">
        <dl>
            <dt>
                <img src="../../assets/z5.png" />
            </dt>
            <dd>
                <p>黑头 橹豆，料豆，零乌豆，乌豆，枝仔豆...</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
     <div class="zz6">
        <dl>
            <dt>
                <img src="../../assets/z6.png" />
            </dt>
            <dd>
                <p>黑米 黑梗米，墨米</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
     <div class="zz7">
        <dl>
            <dt>
                <img src="../../assets/z7.png" />
            </dt>
            <dd>
                <p>红豆 青小豆，植豆</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
     <div class="zz8">
        <dl>
            <dt>
                <img src="../../assets/z8.png" />
            </dt>
            <dd>
                <p>红薯 白薯，番薯，地瓜，山芋，甘薯，红苕</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
     <div class="zz9">
        <dl>
            <dt>
                <img src="../../assets/z9.png" />
            </dt>
            <dd>
                <p>红薯粉 番薯粉，地瓜粉</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    </div>
</template>

<script setup lang="ts">
    import {ref} from 'vue'

    const onClickLeft =()=>history.back()
</script>

<style>
.zz1{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-top: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.zz2{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
 .zz3{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.zz4{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.zz5{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.zz6{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.zz7{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.zz8{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.zz9{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
} 
</style>